<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>校园疫情防控系统</title>
    <style>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <link rel="stylesheet" type="text/css" href="css/admin.css" />
    </style>
    <script>
        function refresh() {
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    procQueryResponse(this.responseText);
                }
            };
            xhttp.open("GET", "/students", true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function procQueryResponse(responseText) {
            const obj = JSON.parse(responseText);
            if (obj.success) {
                const tblBody = document.getElementById('students');
                tblBody.innerHTML = '';
                for (let student of obj.data) {
                    const tr = document.createElement('tr');
                    const td = document.createElement('td');
                    td.innerText = student.id;
                    const td2 = document.createElement('td');
                    td2.innerText = student.name;
                    const td3 = document.createElement('td');
                    td3.innerText = student.sex;
                    const td4 = document.createElement('td');
                    td4.innerText = student.location;

                    const td5 = document.createElement('td');
                    const iptDel = document.createElement('input');
                    iptDel.type = 'button';
                    iptDel.value = '删除';
                    iptDel.addEventListener('click', function () {
                        onDelete(student);
                        return false;
                    });
                    const iptUpdate = document.createElement('input');
                    iptUpdate.type = 'button';
                    iptUpdate.value = '修改';
                    iptUpdate.addEventListener('click', function () {
                        update(student);
                        return false;
                    });
                    td5.appendChild(iptDel);
                    td5.appendChild(iptUpdate);
                    tr.appendChild(td);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    tr.appendChild(td5);
                    tblBody.appendChild(tr);
                }
            }
        }

        function onDelete(student) {
            console.log('删除中...');
            console.log(student);
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('删除成功！');
                        refresh();
                    } else {
                        alert('删除失败！');
                    }
                }
            }
            xhttp.open("POST", "/student/delete?id=" + student.id, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function add() {
            const iptName = document.getElementById('iptName');
            const iptSex = document.getElementById('iptSex');
            const iptLocation = document.getElementById('iptLocation');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('添加成功！');
                        refresh();
                    } else {
                        alert('添加失败！');
                    }
                }
            }
            console.log(iptLocation.value);
            // xhttp.open("POST","/student/add?name=" + iptName.value + '&sex=' + iptSex.value+'&location=' + iptLocation.value,true);
            xhttp.open("POST", "/student/add?name=" + iptName.value + '&sex=' + iptSex.value + '&location=' + iptLocation.value, true);
            // xhttp.open("GET", "/student?id=" + iptId.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();
        }

        function update(student) {
            console.log('更新中...');
            const iptName = document.getElementById('iptName');
            const iptId = document.getElementById('iptId');
            const iptSex = document.getElementById('iptSex');
            const iptLocation = document.getElementById('iptLocation');
            iptName.value = student.name;
            iptId.value = student.id;
            iptSex.value = student.sex;
            iptLocation.value = student.location;
        }

        function onUpdate() {
            const iptName = document.getElementById('iptName');
            const iptSex = document.getElementById('iptSex');
            const iptId = document.getElementById('iptId');
            const iptLocation = document.getElementById('iptLocation');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('修改成功！');
                        refresh();
                    } else {
                        alert('修改失败！');
                    }
                }
            }
            // xhttp.open("POST","/student/add?name=" + iptName.value + '&sex=' + iptSex.value+'&phone=' + iptPhone.value,true);
            // xhttp.open("PUT","/student/update?name=" + iptName.value +'&sex=' + iptSex.value + '&id=' + iptId.value,true);
            xhttp.open("PUT", "/student/update?name=" + iptName.value + '&sex=' + iptSex.value + '&id=' + iptId.value + '&location=' + iptLocation.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();

        }

        function getById() {
            const iptId = document.getElementById('iptId');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    procQueryResponse(this.responseText);
                }
            };
            xhttp.open("GET", "/student?id=" + iptId.value, true);
            xhttp.setRequestHeader('Accept', 'application/json');
            xhttp.send();

        }

        var xhttp = new XMLHttpRequest();
        window.onload = function () {
            refresh();
        }
    </script>
</head>
<body>
<div>
    <form>
        <div>
            <label for="iptId">Id</label>
            <input id="iptId" type="text" placeholder="输入id号" name="id">
        </div>
        <div>
            <label for="iptName">学生姓名</label>
            <input id="iptName" type="text" placeholder="输入学生姓名" name="name">
        </div>
        <div>
            <label for="iptSex">性别</label>
            <input id="iptSex" type="text" placeholder="输入学生性别" name="sex">
        </div>
        <div>
            <label for="iptLocation">位置信息</label>
            <input id="iptLocation" type="text" placeholder="输入位置信息" name="location">
        </div>
    </form>
    <input type="button" value="添加" onclick="add();">
    <input type="button" value="刷新" onclick="refresh()">
    <input type="button" value="查询" onclick="getById()">
    <input type="button" value="确认修改" onclick="onUpdate()">
    <table>
        <thead>
        <tr>
            <th>Id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>位置信息</th>
        </tr>
        </thead>
        <tbody id="students">

        </tbody>
    </table>
</div>
</body>
</html>